<!--  -->
<template>
  <div class="home">
    <header class="home_header">
      <div class="header_l">
        <h1>叩丁狼电商运营平台</h1>
        <el-icon @click="showNav"><Menu /></el-icon>
      </div>
      <div class="header_r">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>首页</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
    <section class="home_center">
      <nav class="home_nav">
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          unique-opened
          active-text-color="#409eff"
          text-color="#fff"
          background-color="#304156"
          :collapse-transition="true"
          :router="true"
          @open="handleOpen"
        >
          <el-menu-item index="/index">
            <i class="iconfont homepage"></i>
            <template #title> <span>首页</span> </template>
          </el-menu-item>
          <el-sub-menu :index="item.id + ''" v-for="item in meunConfig">
            <template #title>
              <i :class="'iconfont' + ' ' + item.icon"></i>
              <span> {{ item.title }}</span>
            </template>

            <template v-for="cItem in item.children">
              <el-menu-item
                :index="'/' + item.name + '/' + cItem.name"
                v-if="cItem.hidden === 0"
                @click="hdClick(cItem.id)"
              >
                <i :class="'iconfont' + ' ' + cItem.icon"></i>
                {{ cItem.title }}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </el-menu>
      </nav>
      <section
        class="home_content"
        :style="{ left: isCollapse ? '70px' : '300px' }"
      >
        <router-view></router-view>
      </section>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
// 用户名
let userName = store.state.userName;
// 一级菜单列表
let meunConfig = computed(() => {
  return store.getters.getNewMenus;
});
let isCollapse = ref(false);
//
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
const hdClick = (id: number) => {
  console.log(id);
};
const showNav = () => {
  isCollapse.value = !isCollapse.value;
};
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  position: relative;
  .iconfont {
    font-size: 20px;
  }
  .home_header {
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: #409eff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    .header_l {
      height: 100%;
      display: flex;
      align-items: center;
      h1 {
        font-weight: 400;
        font-size: 26px;
      }
      .el-icon {
        font-size: 22px;
        margin-left: 20px;
      }
    }
    .header_r {
      display: flex;
      align-items: center;
      color: #fff;
      .el-dropdown-link {
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 16px;
      }
    }
  }
  .home_center {
    width: 100%;
    height: calc(100% - 70px);
    position: relative;
    .home_nav {
      position: absolute;
      height: 100%;
      left: 0;
      top: 0px;
      overflow-y: auto;
    }
    .home_content {
      // margin-left: 300px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      // left: 300px;
      transition: all 0.3s ease-in-out;
      overflow-y: auto;
      // flex: 1;
      min-width: calc(100% - 300px);
      max-width: calc(100% - 70px);
    }
  }

  :deep(.el-menu) {
    height: 100%;
    min-width: 70px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 300px;
    min-height: 400px;
  }
  :deep(.el-icon) {
    margin-left: 0px !important;
  }
}
</style>
